// 人物属性
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/main.js', // webpack入口
    output: { // 出口
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
    },
    plugins: [new HtmlWebpackPlugin({ // plugins插件配置
        template: './public/index.html' // 告诉webpack使用插件时, 以我们自己的html文件作为模板去生成dist/html文件
    })],
    module: { // 加载器配置
        rules: [ // 规则
            { // 一个具体的规则对象
                test: /\.css$/i, // 匹配.css结尾的文件
                use: ["style-loader", "css-loader"], // 让webpack使用者2个loader处理css文件
                // 从右到左的, 所以不能颠倒顺序
                // css-loader: webpack解析css文件-把css代码一起打包进js中
                // style-loader: css代码插入到DOM上 (style标签)
            },
            {
                test:/\.less$/i,
                use:["style-loader","css-loader","less-loader"]
            },
            {
                test: /\.(jpg|gif|png|jpeg)/,
                type: "asset"
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                type:"asset/resource",//所有文字图标文件都输出在dist下

                generator: {
                    filename:"fonts/[name].[hash:6][ext]"
                }
            },
            {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }

        ],
    },
};